<template>
	<view>
   <view class="sear">
     <button  :class="{ 'active': isActive===4 }"  size="mini" @click="search(4)">未审批</button>
   	<button  :class="{ 'active': isActive===1 }"  size="mini" @click="search(1)">已通过</button>
     <button  :class="{ 'active': isActive===2 }"  size="mini" @click="search(2)">已退回</button>
     <button  :class="{ 'active': isActive===3 }"  size="mini" @click="search(3)">已取消</button>
   </view>
		<view class="card"  v-for="item in taskList" :key="item.id">
			<uni-card  :title="item.confDate+' '+item.confTitle"  :extra="item.feedbackStat==='1'?'已通过':item.feedbackStat==='2'?'已退回':item.feedbackStat==='3'?'已取消':'未审批'" >	
			<view class="uni-body">任务：{{item.confContent}}</view> 
      <view class="uni-body">负责人：{{item.nickName}}</view>
      <view class="uni-body">我的反馈：{{item.feedback? item.feedback:'未反馈'}}</view>
      <view class="uni-body">
        <image v-if="item.fileImg" v-for="(i,index) in item.fileImg" :key="index" style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="scaleToFill"
         :src="i" @click="preview(item.fileImg)"></image>
      </view>

			
			<view class="btn">
        <button  type="primary" size="mini" @click="toDetail(item.id)">查看更多反馈并审批</button>		
			</view>
		
		</uni-card>
		</view>
		<u-loadmore v-if="queryParams.pageNum*queryParams.pageSize>totalPage" loadmoreText="到底了~" />
	</view>
</template>

<script>
 import config from '@/config'
 import {
   listConference,
   getConference,
   delConference,
   addConference,
   updateConference,
   getRecord,
   getRecordName,
   updateRecord 
 } from "@/api/system/conference";
	export default {
		data() {
			return {
        isActive: false ,// 默认按钮未被选中
				queryParams: {
				   pageNum: 1,// 初始化页码为1
				   pageSize:10
				   },
				totalPage: null, // 总共有多少页数据
				isLoadingMore: false, // 标记正在加载更多数据
				taskList:[],
        // 用来存放所有的会议列表，用处是当使用状态按钮时用整体列表筛选
        list:[]
			}
		},
		onReady(){
			this.getList()
		},
		methods: {
      // pre   要添加的前缀  paramsList   要加前缀的数组
      addFirst(pre, paramsList) {
        let arr = [];    
        for (let i = 0; i < paramsList.length; i++) {
          arr.push(pre + paramsList[i]);
        }
        return arr;
      },
      preview(imgurl){
        uni.previewImage({
        					 urls: imgurl, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行
        				})

      },
		   async getList(){
         // 任务审批指定两个经理，不需要按名称查
				 const res = await listConference(this.queryParams) 
        if(this.queryParams.pageNum === 1){
			        this.totalPage = res.total; // 设置总页数
			        this.taskList = []; // 清空之前的数据
			            }
                  // console.log(res)
        const newData = res.rows || [];
        this.taskList = [...this.taskList, ...newData]; // 将新数据添加到已有数据的尾部    
        this.taskList.forEach(async(item)=>{
          const feekRes=await getRecord(item.id)
        // console.log(feekRes)
           this.$set(item,"feedback",feekRes.rows[0]?.feedBack)
           this.$set(item,"feedbackStat",feekRes.rows[0]?.feedBackStat)
          if(feekRes.rows[0]?.fileImg){
            // console.log('有图')
            // console.log(feekRes.rows[0].fileImg.indexOf(','))
            if(feekRes.rows[0].fileImg.indexOf(',')===-1){
              feekRes.rows[0].fileImg=[feekRes.rows[0].fileImg]
              // console.log(feekRes.rows[0].fileImg)
              // console.log('单张图')
            }else{
              feekRes.rows[0].fileImg=feekRes.rows[0].fileImg.split(',')
              // console.log(feekRes.rows[0].fileImg)
              // console.log('多张图')
            }
            this.$set(item,"fileImg",this.addFirst(config.baseUrl,feekRes.rows[0].fileImg))
          }
         })
        this.isLoadingMore = false; // 结束加载状态
       this.list=this.taskList
        // console.log(this.taskList)
			},
      search(spvalue){
         this.isActive = spvalue;
        this.taskList=this.list.filter(item=>item.feedbackStat==spvalue)
      },
      toDetail(id){
        uni.navigateTo({
          url:'../taskAllowDetail/taskAllowDetail?id='+id
        })
      },
			async updateState(type,id) {
			   let spState='4'
			   if(type==='send'){
			     spState='2'
			   }else if(type==='makeSure'){
			     spState='1'
			   }else{
			     spState='3'
			   }    
			  },
      onReachBottom() {
          // console.log('触发上拉加载')
          if(!this.isLoadingMore && this.queryParams.pageNum*this.queryParams.pageSize < this.totalPage){
              this.isLoadingMore = true; // 开始加载状态       
              setTimeout(()=>{
                this.queryParams.pageNum++; // 每次加载完成后自增页码
                this.getList(); // 再次请求数据
              },500); // 模拟异步操作需要等待一段时间才能返回数据
              }
            }
	}
	}
</script>

<style lang="less" scoped>
.btn{
	margin-top: 15rpx;
	text-align: right;
}
.sear{
  margin: 20rpx auto;
  width: 95%;
  // border: 1px red solid;
  display: flex;
  justify-content: space-between;
}
/* 非选中状态 */
// .sear button {
//   background-color: #ccc; /* 按钮背景色 */
// }
 
/* 选中状态 */
.sear .active {
  background-color: #aaff7f; /* 按钮选中时的背景色 */
}
</style>
